import { Tooltip } from 'antd';
import extensionDesc from '@/assets/image/screenshot/extension-en.png';
import debugGoogle from '@/assets/image/screenshot/debug-google.png';

## Take a try#online

> Click to view the complete code: [Codesandbox](https://codesandbox.io/p/sandbox/page-spy-with-react-k3pzzt)

<iframe
  width="100%"
  src="https://codesandbox.io/embed/k3pzzt?view=editor+%2B+preview&module=%2Fpublic%2Findex.html"
  title="page-spy-with-react"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>

## Import and Usage#usage

### Use with script#script-usage

#### Step 1#script-usage-step-1

Load `<script>` in the client's project:

```html
<!-- PageSpy SDK -->
<script crossorigin="anonymous" src="{deployUrl}/page-spy/index.min.js"></script>

<!-- Plugins (optional, but recommended) -->
<script crossorigin="anonymous" src="{deployUrl}/plugin/data-harbor/index.min.js"></script>
<script crossorigin="anonymous" src="{deployUrl}/plugin/rrweb/index.min.js"></script>
```

#### Step 2#script-usage-step-2

Initialize PageSpy and the plugins. You can customize the behavior of the SDK through [configuration]({VITE_SDK_BROWSER_REPO}) options:

<blockquote>
  <details>
    <summary>What functions do these plugins provide?</summary>
    <div>
      [DataHarborPlugin]({VITE_PLUGIN_DATA_HARBOR}) and [RRWebPlugin]({VITE_PLUGIN_RRWEB}) are two plugins mainly used to extend the capabilities of PageSpy:
      
      - **DataHarborPlugin**: PageSpy itself only supports _online mode_, meaning the client and the debugging endpoint must be online simultaneously during debugging. DataHarborPlugin enables offline debugging for PageSpy. Click [Offline Log](./offline-log) to see more details.
      - **RRWebPlugin**: Records user operation traces using [rrweb](https://github.com/rrweb-io/rrweb/blob/master/guide.zh_CN.md) as the underlying technology. It's commonly used in conjunction with DataHarborPlugin.

      You can also customize your own PageSpy by [developing plugins](./plugins)!
    </div>
  </details>
</blockquote>

```html
<script>
  window.$harbor = new DataHarborPlugin();
  window.$rrweb = new RRWebPlugin();

  [window.$harbor, window.$rrweb].forEach(p => {
    PageSpy.registerPlugin(p)
  })

  window.$pageSpy = new PageSpy();
</script>
```

### Use with ESM#esm-usage

#### Step 1#esm-usage-step-1

:::code-group

```bash yarn
yarn add @huolala-tech/page-spy-browser @huolala-tech/page-spy-plugin-data-harbor @huolala-tech/page-spy-plugin-rrweb
```

```bash npm
npm install @huolala-tech/page-spy-browser @huolala-tech/page-spy-plugin-data-harbor @huolala-tech/page-spy-plugin-rrweb
``` 

:::

#### Step 2#esm-usage-step-2

```js
import PageSpy from '@huolala-tech/page-spy-browser';
import DataHarborPlugin from '@huolala-tech/page-spy-plugin-data-harbor';
import RRWebPlugin from '@huolala-tech/page-spy-plugin-rrweb';  

window.$harbor = new DataHarborPlugin();
window.$rrweb = new RRWebPlugin();

[window.$harbor, window.$rrweb].forEach(p => {
  PageSpy.registerPlugin(p);
})  

// ESM mode cannot automatically analyze the deployment address, so you must manually configure the following parameters
window.$pageSpy = new PageSpy({
  api: "{deployPath}",
  clientOrigin: "{deployUrl}",
  enableSSL: {enableSSL},
});
```

That's the complete process to integrate PageSpy into a browser project.

Once integrated, click on the top menu <Tooltip title="Menu is hidden by default and will be visible after deployment." color="purple"><a href="javascript:void(0)">Debugging</a></Tooltip> to use it!

## Integrate within#framework

PageSpy has published integration guides for mainstream frameworks on the CodeSandbox platform. You can experience them online:

- **React**：[CodeSandbox - PageSpy in React](https://codesandbox.io/p/sandbox/page-spy-with-react-k3pzzt)
- **Vue**：[CodeSandbox - PageSpy in Vue](https://codesandbox.io/p/sandbox/page-spy-with-vue-ft35qs)
- **Svelte**：[CodeSandbox - PageSpy in Svelte](https://codesandbox.io/p/sandbox/page-spy-with-svelte-p6mxd6)
- **Angular**：[CodeSandbox - PageSpy in Angular](https://codesandbox.io/p/sandbox/page-spy-with-angular-6wg3ps)
- **Nextjs**：[CodeSandbox - PageSpy in Nextjs](https://codesandbox.io/p/sandbox/page-spy-with-nextjs-5htxv5)
- **Nuxtjs**：[CodeSandbox - PageSpy in Nuxtjs](https://codesandbox.io/p/sandbox/page-spy-with-nuxtjs-8znq22)


## Using the Browser Extension#extension

PageSpy provides a browser extension that allows you to use PageSpy on any webpage without integrating any code!

Yes, you read that right! With the PageSpy browser extension, you can debug almost any webpage! (Some websites with CSP policies may not work)

### Install#install-extension

- Go to the [Chrome Web Store](https://chromewebstore.google.com/detail/pagespy/kpfigmbgeedkgnjnlpilghiffepahlmk) to install with a single click, or
- Go to the [Browser Extension repository](https://github.com/HuolalaTech/page-spy-extension/tree/main/packages/online-pagespy-extension) and follow the README instructions for manual installation.

### Panel Parameters#extension-panel

<a href={extensionDesc} target="_blank">
  <img src={extensionDesc} />
</a>

<blockquote>
  <details>
    <summary>Example: Debugging Google</summary>
    <a href={debugGoogle} target="_blank">
      <img src={debugGoogle} />
    </a>
  </details>
</blockquote>